<template>
  <div>
    <a-card title="推荐阅读" :head-style="headStyle" :body-style="bodyStyle">
      <router-link v-for="(item,i) in blogList" :key="item.blogId" :to="'/blog/' + item.blogId" class="recom-card">
        <a-divider v-if="i !== 0" class="divider" />
        <div class="blog-title" v-text="item.blogTitle" />
        <div class="blog-type">分类：<a-tag color="green">{{ item.typeName }}</a-tag></div>
        <div class="blog-bottom">
          <div class="blog-time">{{ item.createdTime }}</div>
          <div class="blog-meta">
            <a-icon type="eye" /><span style="margin-right: 3px" v-text="item.blogRead" />
            <a-icon type="like" /><span style="margin-right: 3px" v-text="item.blogGoods" />
            <a-icon type="heart" /><span style="margin-right: 3px" v-text="item.blogCollection" />
            <a-icon type="message" /><span style="margin-right: 3px" v-text="item.blogComment" />
          </div>
        </div>
      </router-link>
    </a-card>
  </div>
</template>
<script>
import blogApi from '@/api/blog'
export default {
  data() {
    return {
      blogList: [],
      // 标题样式
      headStyle: {
        fontSize: '18px',
        fontWeight: 'bold',
        // lineWeight: '15px',
        borderLeft: '5px solid #409eff'
      },
      bodyStyle: {
        maxHeight: '400px',
        overflow: 'hidden',
        margin: '0px 0 10px 0'
      }
    }
  },
  created() {
    this.getRecomRead()
  },
  methods: {
    getRecomRead() {
      blogApi.getRecomRead().then(resp => {
        this.blogList = resp.data
      })
    }
  }
}
</script>
<style scoped>
.recom-card {
  max-height: 420px !important;
  overflow: hidden;
}
.blog-title {
  font-size: 16px;
  /* line-height: 20px; */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.blog-type {
  /* line-height: 20px; */
}
.blog-bottom {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  font-size: 12px;
  color: #999898;
  margin-bottom: 2px;
}
a {
  display: flex;
  flex-direction: column;
  color: #3e4149;
}
a:hover {
  color: #3e4149;
}
.divider {
  margin: 3px 0 !important;
}
.ant-card-body {
  padding: 0 !important;
  max-height: 420px !important;
}

</style>
